import { history } from 'umi';
import React, { useState, useRef, useEffect ,useImperativeHandle} from 'react';
import { PageContainer, FooterToolbar, PageHeader } from '@ant-design/pro-layout';
import { Button,Divider,message,Input,Drawer,Table,Tabs,Card,Modal,Tag,Select,Descriptions,Form, List } from 'antd';
import ProTable from '@ant-design/pro-table';

import {getInfo} from '../service';
import format from '@/utils/format';

const ImagePull = (props, ref) => {
    const [show,setShow] = useState(false)
    const columns = [
      { title: 'name' , dataIndex: 'name' },
      { title: 'default' , dataIndex: 'default' },
    ]
const [basicInfo,setInfo] = useState({evaluation:[]})
    useImperativeHandle(ref, () => ({
        open: (info) => {
          console.log(info);
          console.log(info.train.userParams);
            setInfo(info)
            setShow(true);


        },
        close: () => {
          setShow(false);
        },
      }));

  return (
      <div>
     <Modal
        title="模型版本详情"
        visible={show}
        footer={null}
        onCancel={() => {
            setShow(false);
        }}
      >
          <Descriptions  column={2} bordered>
        <Descriptions.Item label="模型名称" >{basicInfo.modelName}</Descriptions.Item>
        <Descriptions.Item label="版本" >{basicInfo.name}</Descriptions.Item>
        {basicInfo.evaluation && basicInfo.evaluation.map(e=>{
            return (<Descriptions.Item label={e.key} >{e.value}</Descriptions.Item>)
        })}
        <Descriptions.Item label="发布人" span={2}>{basicInfo.publisher}</Descriptions.Item>
        {/* <Descriptions.Item label="运行参数" span={2}>{basicInfo.parameters}</Descriptions.Item> */}
        <Descriptions.Item label="运行参数" span={2}>
          { basicInfo && basicInfo.train &&
            <Table dataSource={basicInfo.train.userParams} columns={columns} pagination={false}></Table>
          }
          {/* {basicInfo && basicInfo.train && <List dataSource={basicInfo.train.userParams} renderItem={
            item => <List.Item>{item.name}</List.Item>
          }>
          </List> */}
          {/* } */}
          {/* <List dataSource={basicInfo.train.userParams} renderItem={
            item => <List.Item>{item.name}</List.Item>
          }>
          </List> */}
        </Descriptions.Item>

        </Descriptions>

      </Modal>
      </div>

  );
};
const FImagePull = React.forwardRef(ImagePull)
export default FImagePull;
